<template>
	<div class="relative py-[6px] border-b-[1px] border-bg-5">
		<p class="font-bold text-left text-t-1" style="padding: 0.64rem 0 0.21333rem 0">
			{{ $t(renderLabel) }}
		</p>
		<div class="flex justify-between items-center">
			<div class="flex flex-col">
				<template v-for="label in labelList" :key="label">
					<p class="flex gap-2 text-sm font-bold text-t-3 text-left items-center">
						<span>{{ label.label }}</span>
						<span>{{ label.value }}</span>
						<base-copy :value="label.value" v-if="label.copy" />
					</p>
				</template>
			</div>
			<up-amount class="text-xl font-bold text-warning" :value="amount" />
		</div>
	</div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { findKey } from 'lodash-es'
import { UpAmount } from '@/components/up'
import {
	dateFormat,
	enumList,
	fmtDateTime,
	fmtTime,
	getFormatDateBaseLanguage,
	getItemById,
	t
} from '@/utils'
import {
	ActivityCashbackKeys,
	ActivityExpireBonusKeys,
	ActivityRebateKeys,
	ActivityRewardType,
	SlotsRebateKeys
} from '@/enums/activity-reward-type.ts'
import { RewardsHome, RewardsRecord } from '@/enums/rewards.ts'
import { BetType } from '@/enums'
import { useActivityStore } from '@/store'
import { BaseCopy } from '@/components/base'
import dayjs from 'dayjs'

const props = defineProps({
	item: {
		type: Object as any
	}
})

const renderLabel = computed(() => {
	if ([RewardsRecord.lockBonus.id].includes(useActivityStore().rewardType)) {
		const orderNo = props.item?.orderNo
		const betType = props.item?.origin?.message?.betType
		const record = useActivityStore().unlockBetRecord
		if (orderNo && [BetType.slot.id, BetType.casino.id].includes(betType)) {
			return record[betType]?.[orderNo]?.gameName || '...'
		}
		if (orderNo && betType === BetType.realMoney.id) {
			// selections 大于1 的时候 是串关 需要区分展示
			if (record[betType]?.[orderNo]?.selections > 1) {
				return t('betting.combo', [record[betType]?.[orderNo]?.selections.length])
			} else {
				return record[betType]?.[orderNo]?.selections[0]?.eventName || '...'
			}
		}
	}

	const item: any = getItemById(
		enumList(ActivityRewardType).map((value) => value.id),
		props.item?.type
	)
	// 救援金类型 合并展示为"周救援金"(不区分体育,电子,赌场)与标题保持一致
	if (ActivityCashbackKeys.includes(useActivityStore().rewardType)) {
		return t('RewardType.sportsCashback')
	}
	// 活动返利记录 1级列表不显示有效或无效描述,只在2级列表才显示
	if (['referralWinBonus', 'referralLoseBonus'].includes(props.item?.type)) {
		const isValid = props.item.origin.characterIsValid
		const desc = t(`RewardType.${isValid ? 'descValid' : 'descInValid'}`)
		return item.name + desc
	}
	// 添加VIP升级奖金达到的等级
	if (['upgradeBonus'].includes(useActivityStore().rewardType)) {
		const level = props.item?.origin?.vip?.level
		const text = t('RewardType.upgradeLevel', { level: level })
		return item.name + text
	}
	return item?.name || ' item?.name'
})

function fmtTimeCycle(time: any) {
	// 救援金周期是上周的 周一 00:00 -- 周日23:59:59
	const date = dayjs(time).subtract(7, 'day')
	return `${date.day(1).format(getFormatDateBaseLanguage())} -- ${date
		.day(7)
		.format(getFormatDateBaseLanguage())}`
}

const labelList: any = computed(() => {
	if (
		[RewardsHome.lockBonus.id].includes(useActivityStore().rewardType) &&
		findKey(BetType, { id: props.item?.origin?.message?.betType })
	) {
		return [
			{
				label: t('resultDetail.betTime'),
				value: fmtTime(props.item.createdAt)
			},
			{
				label: t('betting.orderNo'),
				value: props.item.orderNo,
				copy: true
			}
		]
	} else if (ActivityCashbackKeys.includes(props.item?.type)) {
		// 每周救援金: 救援金周期, 交易ID
		return [
			{
				label: t('activity.rescue.cycleTime') + ': ',
				value: fmtTimeCycle(props.item.createdAt)
			},
			{
				label: t('report.transactionId') + ': ',
				value: props.item.orderNo,
				copy: true
			}
		]
	} else if (SlotsRebateKeys.includes(props.item?.type)) {
		// 返利-电子: 发放(日期), 交易ID
		return [
			{
				label: t('activity.detail.sendTime') + ': ',
				value: dateFormat(props.item.createdAt)
			},
			{
				label: t('report.transactionId') + ': ',
				value: props.item.orderNo,
				copy: true
			}
		]
	} else if (ActivityRebateKeys.includes(props.item?.type)) {
		// 返利-体育/真人: 发放(时间), 注单ID
		return [
			{
				label: t('activity.detail.sendTime') + ': ',
				value: fmtDateTime(props.item.createdAt)
			},
			{
				label: t('report.transactionId') + ': ',
				value: props.item.orderNo,
				copy: true
			}
		]
	} else if (
		[RewardsRecord.expireBonus.id].includes(useActivityStore().rewardType) ||
		(ActivityExpireBonusKeys.includes(props.item.type) && props.item?.origin?.isExpired)
	) {
		// 过期奖金(!!仅过期状态下); 过期(时间)
		return [
			{
				label: t('record.timeExpired') + ': ',
				value: fmtDateTime(props.item.updatedAt)
			}
		]
	} else {
		// 奖金-首充/再充/VIP升级/RFC/大师杯/每周奖金; 发放(时间)
		return [
			{
				label: t('activity.detail.sendTime') + ': ',
				value: fmtDateTime(props.item.updatedAt)
			},
			{
				label: t('report.transactionId') + ': ',
				value: props.item.orderNo,
				copy: true
			}
		]
	}
})

const amount = computed(() => {
	if ([RewardsHome.lockBonus.id].includes(useActivityStore().rewardType)) {
		return props.item?.origin?.message?.betAmount
	} else {
		return props.item.amount
	}
})
</script>

<style scoped></style>
